<template>
    <div>
        <div class="mg-content">
            <el-row :gutter="20">
                <el-col :span="6">
                     <el-input v-model="input" size="mini" @keyup.enter.native="keyDown($event)" placeholder="请输入规格名称" :maxlength="20"></el-input>
                </el-col>
                <el-col :span="6">
                    <div class="el-input el-input-group el-input-group--prepend">
                        <div class="el-input-group__prepend">供应商</div>
                        <el-select v-model="supplier" filterable placeholder="请选择供应商" style="width:100%;" size="mini">
                            <el-option
                                    v-for="item in suppliers"
                                    :key="item.id"
                                    :label="item.name"
                                    :disabled="item.state!='NORMAL'"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="6">
                    <el-input v-model="input" size="mini" @keyup.enter.native="keyDown($event)" placeholder="请输入单号" style="width:100%">
                        <template slot="prepend">
                            <el-button>单号</el-button>
                        </template>
                    </el-input>
                </el-col>
                <el-col :span="6">
                    <div  class="text-left">
                        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                        <router-link :to="'/order/add'">
                            <el-button type="primary"  icon="el-icon-plus" @click="addShow=true;activityId=''">新建</el-button>
                        </router-link>
                    </div>
                </el-col>
            </el-row>
            <br>
            <el-table
                v-loading="loading"
                :data="tableData"
                border
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(255, 255, 255, 0.5)"
                style="width: 100%">
                <el-table-column
                        type="index"
                        width="50">
                </el-table-column>

                <el-table-column
                        label="单号" >
                    <template scope="scope">
                        <span>{{scope.row.no}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="供应商">
                    <template scope="scope">
                        <span>{{scope.row.supplier.name}}</span>
                    </template>
                </el-table-column>

                <el-table-column
                        label="订单金额" >
                    <template scope="scope">
                        <span>{{scope.row.amount}}</span>
                    </template>
                </el-table-column>

                <el-table-column
                        label="订单日期">
                    <template scope="scope">
                        <span>{{scope.row.createAt}}</span>
                    </template>
                </el-table-column>

                <el-table-column
                        label="收货日期">
                    <template scope="scope">
                        <span>{{scope.row.acceptTime}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="备注">
                    <template scope="scope">
                        <span>{{scope.row.remark}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="210">
                    <template scope="scope">
                        <router-link :to="'/order/show?id='+scope.row.id" class="m-r-5">
                            <el-button type="text" size="small" style="margin: 0px;">查看</el-button>
                        </router-link>
                        <router-link :to="'/order/edit?type=1&id='+scope.row.id" v-if="scope.row.state.key=='INSTORAGE'" class="m-r-5">
                            <el-button type="text" size="small" style="margin: 0px;">再次订购</el-button>
                        </router-link>
                        <router-link :to="'/order/edit?type=3&id='+scope.row.id" v-if="scope.row.state.key=='AUDIT'" class="m-r-5">
                            <el-button type="text" size="small" style="margin: 0px;">确认收货</el-button>
                        </router-link>
                        <router-link :to="'/order/edit?id='+scope.row.id" v-if="scope.row.state.key=='NOAUDIT'" class="m-r-5">
                            <el-button type="text" size="small" style="margin: 0px;">修改</el-button>
                        </router-link>
                        <el-button  v-if="scope.row.state.key=='NOAUDIT'" type="text"
                                    size="small"
                                    style="margin: 0px;"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <br>
            <div class="block text-right">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </div>
        <PluginConfirm
                :show="dialogIsShow"
                @dialogResult="dialogResult">
        </PluginConfirm>
    </div>
</template>
<script>
import PluginConfirm from '@/components/PluginConfirm.vue'
export default{
    data(){
        return{
            loading:false,
            treeData:[],
            defaultProps: {
                children: 'children',
                label:function(data){
                        return "["+data.no+"]"+data.name;
                    }
            },
            tableData: [],
            supplier:"",
            suppliers:[],
            warehouses:[],
            pageSizes:window.pageSizes,//所有可选择的条数
            pageSize:window.pageSize,//控制一页显示的条数
            total:10,//总条数
            input:"",
            currentPage:1,
            inputValue:"",
            dialogIsShow:false,
            addShow:false,
            activityId:"",
        }
    },
    components: {
        PluginConfirm
    },
    created(){
        window.this=this;
        this.initData()
    },
    methods:{
        initData(){
            this.currentPage=1;
            this.getData();
        },
        keyDown(ev){
            if(ev.keyCode==13) {
                this.currentPage=1;
                this.inputValue=this.input;
                this.getData();
            }
        },
        search(){
            this.currentPage=1;
            this.inputValue=this.input;
            this.getData();
        },
        handleCurrentChange(currentPage){
            this.currentPage=currentPage;
            this.getData();
        },
        handleSizeChange(number){
            this.pageSize=number;
            this.getData();
        },
        getData(){
            this.loading=true;
            this.$axios.get("purchaseOrders?page.pn="+this.currentPage+"&page.size="+this.pageSize+"&search.name_like="+this.inputValue).then((data)=>{
                this.loading=false;
                this.tableData=data.content.orders.rows
                this.suppliers=data.content.supplier;
                this.warehouses=data.content.warehouse;
                this.total=data.content.orders.total
            }).catch(function(err){
                console.log(err);
            })
        },
        /*用户选择提示框后处理*/
        dialogResult(param){
            this.dialogIsShow=param.close;
            if(param.choose==="ok"){
                //console.log("确定");
                this.$http.delete("materials/"+this.curDataRow.id).then(function(data){
                    if(data.status==200){
                        this.tableData.splice(this.curDataIndex,1);
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.initData();
                    }else{
                        this.$message({
                            type: 'error',
                            message: data.message
                        });
                    }
                })
            }else if(param.choose==="cancel"){
                //console.log("取消");
            }else{
                //console.log("不做处理");
            }
        },
        handleDelete(index, row) {
            this.curDataIndex = index;
            this.curDataRow = row;
            this.dialogIsShow = true;
            return false;

            console.log(index, row);
            this.$confirm('您确定删除此数据?', '提示', {
                confirmButtonText: '取消',
                cancelButtonText: '确定',
                type: 'warning',
                cancelButtonClass:"deleteCancel",
                confirmButtonClass:"deleteConfirm",
                showClose:false
            }).then(() => {

            }).catch(() => {
                this.$http.delete("materials/"+row.id).then(function(data){
                    if(data.status==200){
                        this.tableData.splice(index,1);
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.initData();
                    }else{
                        this.$message({
                            type: 'error',
                            message: data.message
                        });
                    }
                })
            });

        },
        addSuccess(item){
            this.addShow=false;
            this.initData();
        },
        addClose(){
            this.addShow=false;
        },
    }
}
</script>
<style scoped>
.me_title{
    padding:10px 0px;background-color: #eef1f6; border: 1px solid #dfe6ec;border-bottom: 0px;
}
</style>
